<template>
    <custom-page-box class="page-box">
        <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="{ span: 4 }"
            :wrapperCol="{ wrapperCol: { span: 14 } }"
        >
            <a-form-model-item label="标题" prop="title">
                <a-input v-model="form.title" placeholder="请输入标题(30字以内)" :maxLength="30"></a-input>
            </a-form-model-item>
            <a-form-model-item label="接受范围" prop="scope">
                <a-select placeholder="请选择接受范围" v-model="form.scope">
                    <a-select-option :value="-1">全体</a-select-option>
                    <a-select-option :value="4">服务商</a-select-option>
                    <a-select-option :value="5">投资商</a-select-option>
                    <a-select-option :value="6">政府端</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="类型" prop="mode">
                <a-select placeholder="请选择消息类型" v-model="form.mode">
                    <a-select-option :value="1">通知</a-select-option>
                    <a-select-option :value="2">推送</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="内容" prop="message">
                <a-textarea v-model="form.message" placeholder="请输入发布内容" :rows="4" />
            </a-form-model-item>
            <div class="btn">
                <a-button type="primary" @click="onSubmit">发布</a-button>
            </div>
        </a-form-model>
    </custom-page-box>
</template>

<script>
export default {
    data () {
        return {
            form: {
                title: '',
                scope: undefined,
                mode: undefined,
                message: ''
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    }
                ],
                scope: [
                    {
                        required: true,
                        message: '请选择接受范围',
                        trigger: 'change'
                    }
                ],
                mode: [
                    {
                        required: true,
                        message: '请选择消息类型',
                        trigger: 'change'
                    }
                ],
                message: [
                    {
                        required: true,
                        message: '请输入发布内容',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    methods: {
        onSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    const { title, scope, mode, message } = this.form
                    this.$ApiServer['operate/info/submit']({
                        title,
                        scope,
                        mode,
                        message
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success('发布成功')
                            this.$router.push({
                                name: 'platform-operation-Info-issue'
                            })
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.action {
    width: 100%;
    background: #fff;
    margin-bottom: 10px;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    justify-content: flex-end;
}
.ant-form {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    padding-top: 50px;
    ::v-deep {
      .ant-col-4{
        width: 206px;
      }
        .ant-form-item {
            display: flex;
            .ant-form-item-control-wrapper {
                width: 400px;
            }
        }
    }
}
.btn{
  margin-top: 6px;
  padding-left: 205px;
}
</style>
